<template>
  <div class="tabs-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
          <z-form-item
            :datas="fieldArr"
            :form="queryParam"
            :gutter="8"
            :submitAction="{show: true, toggle: false, span: 6}"
            @change="getChangeTime"
            @onSubmit="onQuery"
            @onReset="onResetForm"
          />
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button @click="handleExport">导出</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @change="onTableChange"
        />
      </div>
    </a-card>
  </div>
</template>

<script>
import * as personServiceApi from '@/api/sjsk/personService'
import { downLoadFileReader } from '@/utils/export-util/util'

export default {
  data() {
    return {
      loading: false,
      queryParam: {},
      dictOptions1: [
        { text:"省内异地管控", value:"1" },
        { text:"省外异地管控-转出省外", value:"2" },
        { text:"省外异地管控-外省转入", value:"3" }
      ],
      fieldArr: [
        {label: '报告日期', prop: 'date', tagType: 'range-picker',format: 'YYYY-MM-DD', span: 6},
        {label: '是否公示', prop: 'suspccountType', tagType: 'dict-select', dictCode:'dict_yn', span: 6},
        {label: '类型', prop: 'type', tagType: 'dict-select', dictOptions: [], span: 6},
      ],
      columns: [
        {
          title: '序号', dataIndex: 'order', width: 50, align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        { title: '报告日期', dataIndex: 'reportDate', width: 110, align: 'left', },
        {
          title: '是否公示', dataIndex: 'isPublicity', width: 70, align: 'center',
          customRender: text => {
            return this.$filterDictTextByCache('dict_yn', text)
          }
        },
        {
          title: '类型', dataIndex: 'type', width: 100, align: 'center',
          customRender: text => {
            return this.$options.filters.filterArray(text, this.dictOptions1, 'value', 'text')
          }
        },
        { title: '生成时间', dataIndex: 'createTime', width: 100, align: 'center' },
        {
          title: '操作', width: 80, align: 'center', dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <span class="action-button">
                <a-button type="link" onClick={event => this.handleApi(record)}>公示</a-button>
                <a-button type="link" onClick={event => this.handleRouter(record)}>查看</a-button>
              </span>
            )
          }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  created() {
    this.fieldArr.forEach(item => {
      let d = [{ text:"请选择", value:"" }]
      if(item.prop==='type') {
        item.dictOptions = [...d, ...this.dictOptions1]
      }
    })
  },
  mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let {date, ...dataParam} = this.queryParam // 剔除date元素，dataParam最新的对象
      let queryParam = Object.assign({}, dataParam, this.pageFilter)
      this.loading = true
      personServiceApi
        .getWorkNotificationList(queryParam)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warn('请求失败！')
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 导出
    handleExport(record) {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      let idList1 = selectList.map(v => v.id).filter(obj => obj !== null && obj !== undefined && obj !== '')
      let idList2 = record && Object.keys(record).length > 0 && record.id ? [record.id] : []
      let params = Object.assign(
        {},
        {
          idList: selectList.length > 0 ? idList1 : idList2,
          queryWorkNotificationVO: this.queryParam
        }
      )
      this.$confirm({
        title: `是否确认导出？`,
        okText: '确定',
        onOk() {
          personServiceApi.workNotificationExport(params).then(async res => {
            const fileName = '异地管控工作通报列表数据.xlsx'
            await downLoadFileReader(res, fileName)
            that.$refs.table.onClearRowKeys()
          })
        }
      })
    },
    handleApi(record) {
      let that = this
      let reportDate = this.$options.filters.moment(record.reportDate, 'MM')
      let type = this.$options.filters.filterArray(record.type, this.dictOptions1, 'value', 'text')
      let title = `确定公示${reportDate}月${type}工作情况`
      let content = ''
      this.$confirm({
        title: `${title}?`,
        onOk() {
          personServiceApi.publicity(record.id)
          .then(res => {
            if (res.success) {
              that.$message.success('操作成功！')
              that.onQuery()
            } else {
              that.$message.warn(res.message?res.message: '操作失败！')
            }
          })
          .catch(e => {
            that.$message.warn('操作失败！')
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'confirm',
      })
    },
    handleRouter(record) {
      this.$message.warn('报告未对接')
    },
    // 获取组件的时间， prop为对应的字段，date为选中的时间值
    getChangeTime(prop, date) {
      if(prop === 'date') {
        this.$set( this.queryParam, 'reportStartDate', date[0] )
        this.$set( this.queryParam, 'reportEndDate', date[1] )
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
